<template>
    <div class="photo-card">
        <img :src="require('../../static/'+photo.imgurl+'.jpg')" class="photo-img">
        <div class="photo-bg"></div>
        <div class="photo-like">
            <svg-icon icon="love"></svg-icon>
            <span class="like-data">{{photo.like}}</span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    photo: {
        default: {}
    }
})
</script>

<style lang="less" scoped>
.photo-card {
    position: relative;

    &:hover {
        .photo-bg {
            opacity: 1;
        }

        .photo-like {
            opacity: 1;
        }
    }

    .photo-img {
        width: 100%;
    }

    .photo-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: @tr;
    }

    .photo-like {
        position: absolute;
        top: @padding-8;
        left: @padding-8;
        background: @gray-10;
        border-radius: @padding-20;
        height: 28px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
        opacity: 0;
        transition: @tr;
        cursor: pointer;

        .svg-icon {
            color: @gray-2;
            padding-right: @padding-4;

            &:hover {
                color: @like;
            }
        }

        span {
            color: @gray-0;
        }

    }
}
</style>